<!-- 零件生成图框 -->
<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.partManager.productStructurePage.generateFrame')"
    @register="register"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :minHeight="500"
    :width="1000"
  >
    <Row>
      <Col :span="24">
        <p style="padding: 0 20px">{{
          t('routes.demo.partManager.productStructurePage.detailColumn')
        }}</p>
        <BasicTable @register="registerTable" />
      </Col>
    </Row>
    <Row :gutter="24">
      <Col :span="12">
        <p style="padding: 10px 20px 0">{{
          t('routes.demo.partManager.productStructurePage.titleColumn')
        }}</p>
        <BasicTable @register="registerTable2" />
      </Col>
      <Col :span="12">
        <p style="padding: 10px 20px 0">{{
          t('routes.demo.partManager.productStructurePage.frameSetting')
        }}</p>
        <BasicForm @register="registerForm" />
        <div style="display: flex; justify-content: flex-end; margin-right: 40px">
          <a-button type="primary">{{
            t('routes.demo.partManager.productStructurePage.FramePage.generateFrame')
          }}</a-button></div
        >
      </Col>
    </Row>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form';
  import { Row, Col } from 'ant-design-vue';

  import { getFrameColumns, getAttributeColumns, getFrameForm } from './data';

  const { t } = useI18n();

  // 提交
  const handleSubmit = async () => {
    closeModal();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
  });

  // 初始化表格
  const [registerTable] = useTable({
    columns: getFrameColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    rowKey: 'id',
  });

  const [registerTable2] = useTable({
    columns: getAttributeColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    rowKey: 'id',
  });

  // 初始化表格
  const [registerForm, { validate }] = useForm({
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
    schemas: getFrameForm(),
    showActionButtonGroup: false,
  });
</script>

<style lang="less" scoped>
  /* 样式 */
</style>
